 <meta charset="utf-8">
 <div class="card card-primary" id="app_device_edit" style="max-width: 1200px;" > 
 
     <form role="form"  id="editForm" >
            <div class="card-body"> 
			    
                
                <div class="form-group" >
                  <label for="deviceNum" class="control-label">设备编号</label>
                  <input type="text" v-model="device.deviceNum" class="form-control"  required="required"/>
                </div>
                
                 <div class="form-group" >
                  <label for="name" class="control-label">设备名称</label>
                  <input type="text" v-model="device.name" class="form-control"  required="required"/>
                </div>
                
                <div class="form-group" >
                  <label for="macAds" class="control-label">MAC地址</label>
                  <input type="text" v-model="device.macAds" class="form-control"  />
                </div>
                
                
                <div class="form-group" >
                  <label for="unit" class="control-label">IP地址</label>
                  <input type="text" v-model="device.ipAds" class="form-control"  required="required"/>
                </div>
             
                <div class="form-group" >
                  <label for="location" class="control-label">位置描述</label>
                  <input type="text" v-model="device.location" class="form-control"  />
                </div>
                <div class="row">
                
	                <div class="col-md-6">
		                <div class="form-group" >
		                	<label class="control-label" >产品系列</label>
							  <select v-model="device.deviceTypeId"  class="form-control"  @change="onChangeType(device.deviceTypeId)" style="width: 120px;"   >
							         <option  value="">请选择</option>
									 <option v-bind:value="deviceTypeMdoel.id" v-for="deviceTypeMdoel in deviceTypeMdoelList" >{{deviceTypeMdoel.name}}</option>
								</select>
						 </div>
	                </div>
                
	                <div class="col-md-6">
		                <div class="form-group ">
					          <label  class="control-label" >产品型号</label>
							   <select v-model="device.deviceModelId"  class="form-control"  style="width: 120px;"   >
							   		<option  value="">请选择</option>
									<option v-bind:value="deviceMdoel.id" v-for="deviceMdoel in deviceMdoelList" >{{deviceMdoel.name}}</option>
								</select>
				         </div>	
		            </div>
                </div>
                
                 <div class="form-group">
                  <label for="permCode" class="control-label">备注</label>
                  <input type="text" v-model="device.remark" class="form-control"/>
                </div>
                
                
             
            </div>
            <div class="form-group" style="padding-right: 15px;padding-left: 15px;">
                 <button type="button" class="btn btn-light" v-on:click="cancel">取消</button>
                 <button type="button" class="btn btn-info float-right"  v-on:click="edit">提交</button>
              </div> 
       </form>

<script type="text/javascript">
var news= new Vue({
    el: '#app_device_edit',
    data: {
    	device:{
    		id:null,
    		name:null,
    		deviceNum: null,
    		location: null,
    		macAds: null,
    		remark: null,
    		ipAds: null,
    		deviceTypeId: null,
    		deviceModelId: null,
    	},
    	  deviceTypeMdoelList:[],
		  deviceMdoelList:[],
    	bus:new Vue()
     },
     mounted:function(){
    	 var _this=this;
    	 _this.loadAllDeviceTypeModel();
    	 
     },
     methods: {
    	 initData: function(){
    		 var _this=this;
    		 var url="/manger/device/loadDevice";
        	 var param=zfesLayerEditDg.getLayerParam();
    		 zfesAjax.ajaxTodo(url,param, function(data){
        		 _this.device=data.data.device;
        		 _this.onChangeType(_this.device.deviceTypeId);
        	 })
 		},
    	 loadAllDeviceTypeModel: function(){
        	 var　_this=this;
     		var ajaxUrl="/manger/deviceType/loadAllDeviceTypeModel";
     		zfesAjax.ajaxTodo(ajaxUrl,{}, function(data) {
    				_this.deviceTypeMdoelList=data.data.result;
    				_this.initData();
    			}); 
         },
         onChangeType: function(typeId){
	  		 var　_this=this;
	  		if(!typeId){
	  			_this.deviceMdoelList=[];
	  		}else{
	 	  		_this.deviceTypeMdoelList.forEach(function(value, index, array){
	 	  			if(value.id==typeId){
	 	  			  _this.deviceMdoelList=value.deviceModelList;
	 	  			}
	 	  		})
	  		}
	  	},
    	 edit: function () {
    	    	if($("#editForm").valid()){
    	    		var _this=this;
    	    		var url="/manger/device/updateDevice";
    	    		zfesAjax.ajaxTodo(url,_this.device, function(data){
    	    			alertSwal.successText(data.message);
    	        		 layer.close(layer.index);
    	        	 })
    	    		
    	    	}
    	    },
    	    cancel: function(){
    	    	 layer.close(layer.index);
    	    }
    }
});
</script>
</div>